<template>
  <div class="main-container-box">
    <div class="main-header">
      <Top></Top>
    </div>
    <div class="content-box">
      <div class="main-nav">
        <!-- <Nav :menuList="navList"></Nav> -->
        <sidebar />
      </div>
      <div class="main-content">
        <div class="tagBox">
          <!-- <Tag></Tag> -->
          <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <div class="content">
          <div>
            <transition name="fade-transform" mode="out-in">
              <keep-alive
                include="ThemeSearch">
                <router-view ></router-view>
              </keep-alive>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/components/layout/top.vue'
import Nav from '@/components/layout/nav.vue'
//import Tag from '@/components/layout/tag.vue'
import Sidebar from '@/components/layout/Sidebar'
import Breadcrumb from '@/components/layout/Breadcrumb'
//import { getMenuList, getroutes } from '@/http/api/myHttp'

export default {
  components: { Top, Nav, Sidebar, Breadcrumb },
  data() {
    return {
      isShow: true,
      activeIndex: 'home',
      navList: []
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
    this.handleRoutes()
  },
  methods: {
    handleRoutes() {
      // getMenuList()
      //   .then((response) => {
      //     this.navList = response.data.list
      //     console.log(response)
      //   })
      //   .catch((error) => {})
      //*************************************************** */
      // getroutes()
      //   .then((response) => {
      //     this.navList = response.data.list
      //   })
      //   .catch((error) => {})
      //*************************************************** */
      // //真正需要的路由都是有children的，只有login和404没有
      // let list = []
      // let list2 = this.$store.getters['permission/GET_Routes']
      // list = list2.filter((item) => {
      //   return item.name !== 'systemManagement'
      // })
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].children) {
      //     if (list[i].meta.title == '首页') {
      //       list[i].children = []
      //     }
      //   }
      // }
      // this.navList = list
    },
    handleSelect(key, keyPath) {
      let name = keyPath[keyPath.length - 1]
      this.$router.push({
        name: name
      })
    }
  }
}
</script>
<style scoped lang="scss">
body,
html {
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.main-container-box {
  width: 100%;
  height: 100%;
  min-width: 1200px;
}

.content-box {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 80px);
  //padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;

  .main-nav {
    box-sizing: border-box;
    // width: 265px;
    width: 265px;
    height: 100%;
    padding: 12px 0;
    // border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    // ::v-deep {
    //   .el-menu-vertical-demo .el-menu-item {
    //     background-color: white !important;
    //     background: white;
    //     height: 44px;
    //     line-height: 44px;
    //     font-size: 16px;
    //     font-weight: 500;
    //     letter-spacing: 0px;
    //     color: rgba(38, 38, 38, 1);
    //     padding: 0 0 0 10px !important;
    //     width: 216px;
    //     box-sizing: border-box;
    //     margin: 0 0 10px 0;
    //   }

    //   .el-menu-vertical-demo .is-opened {
    //     background: url('@/assets/拼合图形.png') no-repeat !important;
    //     background-size: 100%;
    //     //padding-left: 10px;
    //     box-sizing: border-box;

    //     .el-submenu__title {
    //       color: rgba(255, 255, 255, 1);
    //     }

    //     .el-menu-item {
    //       margin-bottom: 0;
    //       font-size: 14px;
    //       font-weight: 500;
    //       letter-spacing: 0px;
    //       color: rgba(128, 141, 157, 1);
    //       box-sizing: border-box;
    //       padding-left: 20px !important;
    //     }
    //     .is-active {
    //       color: rgba(23, 131, 245, 0.7) !important;
    //     }
    //     .el-submenu__icon-arrow {
    //       right: 32px;
    //       color: #fff;
    //     }
    //   }

    //   .el-submenu__icon-arrow {
    //     right: 32px;
    //   }

    //   .el-submenu__title {
    //     height: 44px;
    //     width: 216px;
    //     line-height: 44px;
    //     font-size: 16px;
    //     font-weight: 500;
    //     letter-spacing: 0px;
    //     color: rgba(38, 38, 38, 1);
    //     margin-bottom: 10px;
    //     padding: 0 0 0 10px !important;
    //   }

    //   .el-submenu__title:hover {
    //     background: none;
    //   }

    //   .el-menu-vertical-demo .el-submenu {
    //     background: white;
    //   }
    // }
  }

  .main-content {
    box-sizing: border-box;
    width: calc(100% - 265px);
    height: 100%;

    // overflow-y: auto;
    // overflow-x: hidden;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .content {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 50px);
      padding-top: 15px;
      padding-left: 15px;
      padding-right: 15px;
      background-color: rgb(246, 248, 250);

      >div {
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }

    .tagBox {
      height: 50px;
      width: 100%;
      line-height: 50px;
      background-color: #fff;
      text-align: left;
    }
  }
}
</style>
